<template>
  <section style="height: 100%">
    <el-card style="height:calc(100% / 2 - 10px)">
    <div class="time">{{currentDataTime.date}} {{currentDataTime.time}} {{currentDataTime.week}}</div>
    <div class="user-info">
      <i class="el-icon-user"></i>
      <div class="right">
        <div>{{useNmae}}</div>
        <div>{{schoolName}}</div>
      </div>
    </div>
    </el-card>
    <el-card style="height:calc(100% / 2 - 10px)">
      <!-- <div class="up-time">
        <label>更新时间：</label>
        <el-time-picker
          size="small"
          @change='handleChangeTime'
          v-model="upTime"
          :clearable='false'
          value-format='HH:mm:ss'
          placeholder="请选择时间">
        </el-time-picker>
      </div>
      <div>
        <label>数据状态：</label>
        <span>{{updatedTime ? '已更新' : '未更新'}}</span>
      </div>
      <div>
        <label>最近更新时间：</label>
        <span>{{getTime}}</span>
      </div> -->
      <!--  -->
      <div class="time-row" v-for="item in listData" :key="item.type" @click="timeChange(item)">
        <div class="label">{{item | getTitleValue}}</div>
        <div class="value">{{getTaskTime(item)}}</div>
        <!-- {{getValue(item.type)}} -->
      </div>
    </el-card>
    <el-drawer
    :visible.sync="showTime"
    :wrapper-closable='false'
    show-slose
    destroy-on-close
    size='45%'>
      <TriggerTimeForm :type="changeType" @click-cancel='handleCancel'/>
    </el-drawer>
  </section>
</template>

<script>
// import { GetWeek, GetDate, GetTime } from '@/utils/currentTimeU.js'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { getAllList } from '@/views/children/antiepidemic/js/base'
import { query } from '@/views/children/antiepidemic/js/dynamicTiming'
// setDynamicTiming
import TriggerTimeForm from './TriggerTimeForm.vue'
export default {
  data () {
    return {
      currentDataTime: {
        date: ''
      },
      useNmae: '',
      schoolName: '',
      timeList: [],
      listData: [0, 1, 2],
      showTime: false,
      changeType: {}
    }
  },
  components: {
    TriggerTimeForm
  },
  mounted () {
    this.getSchoolInfo()
    this.queryCon()
    this.useNmae = Vue.ls.get(USER_INFO).userName
  },
  filters: {
    getTitleValue (value) {
      let valueJson = {
        0: '健康上报时间：',
        1: '核酸码上报时间：',
        2: '疫测上报时间：'
      }
      return valueJson[value] || ''
    }
  },
  methods: {
    async getSchoolInfo () {
      const { code, data } = await getAllList()
      if (code === 0 && data && data.length > 0) {
        this.schoolName = data[0].name
      }
    },
    // 获取更新配置信息
    queryCon () {
      query().then((res) => {
        const { code, data } = res
        if (code === 0) {
          // 过滤不启用
          this.timeList = data.filter((item) => item.deleteFlag === 0)
        }
      })
    },
    // 获取展示时间
    getTaskTime (item) {
      let data = this.timeList.find((ele) => ele.reportType === item)
      return data?.taskTime || '暂无配置'
    },
    handleCancel (value = false) {
      this.showTime = false
      if (value) this.queryCon()
    },
    // handleChangeTime () {
    //   console.log('current', this.upTime)
    //   setDynamicTiming({
    //     taskTime: this.upTime
    //   })
    // },
    timeChange (value) {
      this.showTime = true
      // this.changeType =
      let data = this.timeList.find((ele) => ele.reportType === value)
      this.changeType = data || {
        timeType: 0,
        reportType: value
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.time {
  font-size: 0.2rem;
}
.user-info {
  display: flex;
  margin-top: 0.2rem;
  font-size: 0.2rem;
  line-height: 0.4rem;
  i {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0.8rem;
  }
}
.up-time {
  margin-bottom: 20px;
}
.time-row {
  display: flex;
  margin-bottom: 0.08rem;
  .label {
    min-width: 1.7rem;
    font-size: 0.2rem;
  }
  .value {
    display: flex;
    padding-left: 0.05rem;
    flex: 1;
    background: rgb(179, 179, 179);
    border-radius: 0.2rem;
    padding-left: 0.2rem;
    align-items: center;
  }
}
</style>
